<template>
  <div class="container" v-if="showTable">
    <dv-border-box-8>
      <div class="header">
        <span style="color: yellow;font-size: 18px">{{ shopName }}</span>
        <i class="el-icon-circle-close" @click="close"></i>
      </div>

      <!--border="1px solid"-->
      <table width="100%"  cellspacing="0" cellpadding="0">
        <thead>
        <tr>
          <th>{{ numMsg }}</th>
          <th>{{ goodMsg }}</th>
          <th>{{ priceMsg }}{{ unit }}</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for=" (item,i) in items" :key="i">
          <td>{{ item }}</td>
          <td>{{ goods[item - 1] }}</td>
          <td>{{ price[item - 1] }}</td>
        </tr>
        </tbody>
      </table>

    </dv-border-box-8>
  </div>
</template>
<script>
//引入此模块，实现组件间通信
import {EventBus} from "@/main";
export default {
  name: "MyBox",
  data() {
    return {
      showTable: false,
      numMsg: '',
      goodMsg: '',
      priceMsg: '',
      unit: '',
      items: 0,
      goods: '',
      price: '',
      shopName: '',
    }
  },
  methods: {
    //表单伸展折叠
    close() {
      this.showTable = false;
    },
  },
  beforeCreate() {
    //接收商品及价格数据
    EventBus.$on("food", (data) => {
      this.goods = data;
      this.numMsg = '序号';
      this.showTable = true;
    });
    EventBus.$on("price", (data) => {
      this.price = data;
      this.priceMsg = '价格';
      this.unit = '(元/KG)'
    });
    EventBus.$on("item", (data) => {
      this.shopName = data;
      this.goodMsg = '品类';
    });
    //接收商品数量数据
    EventBus.$on("count", (data) => {
      this.items = data;
    });
    //接收关闭table窗口命令
    EventBus.$on('close',()=>{
      this.showTable = false
    })
  }
}
</script>
<style scoped>
.container {
  color: white;
  font-size: 2vh;
  height: inherit;
  width: 18%;
  position: absolute;
  top: 15%;
  right: 3%;
  background: rgb(102, 102, 102, 0.6) url(../img/line.png);
  text-align: center;
}
tr > th {
  font-weight: bolder;
}
.el-icon-circle-close {
  font-size: 30px;
  position: absolute;
  right: 2%;
  top: 0.5%;
  color: white;
  opacity: 0.8;
}
.el-icon-circle-close:hover {
  color: #333333;
}
</style>